<template>
    <div class="divFullPage"> 
        <div class="login">
            <div class="header">
                <div class="mainTitle">{{sys.titles.main}}</div>
                <div class="subTitle">{{sys.titles.sub}}</div>
            </div>
            <div class="form">
                <div class="dataRow">
                    <el-input v-model="code" style="width:100%" placeholder="请输入用户名"></el-input>
                    <div class="lab">用户名</div>
                    <i class="fa fa-user-circle icon"></i>
                </div>
                <div class="dataRow">
                    <el-input type="password" v-model="pwd" style="width:100%" placeholder="请输入登录密码"></el-input>
                    <div class="lab">密码</div>
                    <i class="fa fa-key icon"></i>
                </div>
            </div>
            <div class="btns">
                <a href="#">忘记密码</a>
                <el-button type= "primary"><i class="fa fa-lock"></i> 注册账号</el-button>
                <el-button @click="login" type= "success"><i class="fa fa-unlock"></i> 登录系统</el-button>
            </div>
            <el-divider></el-divider>
            <div class="copyrights">
                copy right @ 中科数容科技有限公司 2022~2025
            </div>
        </div>
    </div>
</template>

<script>
    var sys = require("./redirection.js");
    export default {
        mounted() {
        }, 
        data() {
            return {
                sys: sys.redirectionSys,
                code:"",
                pwd:""
            };
        },
        methods: {
            login() {
                var me = this;
                try {
                    me.sys.checkLogin(me.code , me.pwd).then(res=>{
                        if( res.status>0){
                            res.tm = ( new Date()).getTime();
                            var key = [me.sys.model.config.version, res.tm].join("_");
                            window.sessionStorage.setItem(key , JSON.stringify(res));
                            var opts={
                                path:"/reMain" ,
                                query:{
                                    sid:key
                                }
                            };
                            me.$router.push(opts);
                        }
                        else{
                            me.$message.error('用户名或密码错误！');
                            me.pwd = "";
                        }
                    });
                } catch (error) {
                    console.log(error);
                }
                
            },
        },
    }
</script>


<style lang="less" scoped>
    @import "./style/redirection.less";


.login{
    width: 360px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    box-shadow: 0 0 15px #4E4E4E;
    
    .header{
        position: relative;
        height: 160px;
        background-image: url('/imgs/redirection/loginTop.jpg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        color: #37b877;
        .mainTitle{
            position: absolute;
            right:20px;
            top: 20px;
            font-size: 3em;
            font-weight: bold;
            text-shadow: 1px 1px 1px  #052716;
        }
        .subTitle{
            position: absolute;
            right:20px;
            bottom:30px;
            font-size: 1.6em;
            font-weight: bold;
            text-shadow: 1px 1px 1px  #052716;
        }
    }

    .form{
        padding: 30px 0px;
        .dataRow{
            padding: 10px 20px;
            position: relative;
            .lab{
                position: absolute;
                left: 30px;
                top: 50%;
                width: 70px;
                transform: translate(0,-50%)
            }
            .icon{
                position: absolute;
                right: 30px;
                top: 50%; 
                transform: translate(0,-50%)
            }

            ::v-deep .el-input input{
                padding-left: 90px;
                padding-right: 30px;
                font-weight: bold;
                border: 0px;
                border-bottom: 1px solid #ddd;
                border-radius: 0;
            }
        }
    }
    .btns{
        padding: 10px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .copyrights{
        padding-bottom: 30px;
    }
}
</style>